<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>打印</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    @page {
      margin: 0;
    }
    #print {
      font-size: 12px;
      word-break: break-all;
    }
    p{
      margin: 2px 0; 
    }
    .title,
    .name {
      font-size: 14px;
    }
    .name{
      text-align: center;
    }
    #qrCode {
      width: 120px;
      height: 120px;
      margin-left: 18px;
    }
    .line{
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <div id="print">
  </div>
</body>
<script src="1qrcode.min.js"></script>
<script type="module">
  let u = new URLSearchParams(document.location.search);
  document.getElementById('print').innerHTML = `
    <p class="title">安徽口子酒业股份有限公司</p>
    <p class="name">人员登记信息单</p>
    <p>姓名: ${u.get('name')}</p>
    <p>电话: ${u.get('phone')}</p>
    <p>来访时间: ${u.get('time')}</p>
    <p>来访事由: ${u.get('reason')}</p>
    <p>体温: ${u.get('temperature')}</p>
    <p>性别: ${u.get('sex') == 0 ? '男' : '女'}</p>
    <p>身份证: ${u.get('card')}</p>
    <p>单位: ${u.get('unit')}</p>
    <p>地址: ${u.get('address')}</p>
    <div><canvas id="qrCode"></canvas></div>
    <p class="line">====================</p>
    `
  const opt={
    errorCorrectionLevel: 'H',
    type: 'image/png',
    quality: 1,
    margin: 1,
    width:120,
  }
  QRCode.toCanvas(document.getElementById('qrCode'), u.get('code'),opt, function (error) {
    if (error) console.error(error)
    console.log('QRCode success!');
  });
  // new QRCode('qrCode', {
  //   text: u.get('code'),
  //   width: 120,
  //   height: 120,
  //   colorDark: '#000000',
  //   colorLight: "transparent",
  //   correctLevel: QRCode.CorrectLevel.L
  // });
</script>

</html>